<template>
  <div class="wrapper-add-edit">
    <div class="wrapper-intro">
      <el-alert :title="intro" type="success" :closable="false" show-icon />
    </div>

    <div class="wrapper-form">
      <el-form label-width="120px">
        <el-form-item label="所属类别">
          <el-radio-group v-model="tagId" @change="onTagChange">
            <el-radio v-for="item in allCategoryTagList" :key="item.id" :value="item.id" :label="item.label" />
          </el-radio-group>
        </el-form-item>

        <el-form-item label="选择上级分类" style="max-width: 600px">
          <el-tree-select
            v-model="idParent"
            :data="treeSelectData"
            :props="{ value: 'id', label: 'label' }"
            :render-after-expand="false"
            :current-node-key="0"
            value-key="id"
            placeholder="选择上级分类"
            check-strictly
          />
        </el-form-item>

        <el-form-item label="类别设置" style="max-width: 800px">
          <el-input ref="content" v-model="rows" type="textarea" rows="20" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onAddBatch">确定添加</el-button>
          <el-button @click="onBack2List">取消并返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { AryToTree } from '@/utils/array'
import { getLStorage, getLStorageObj } from '@/utils/web-storage'
import { toastError, toastSuccess } from '@/utils/toast'

import router from '@/router'
import store from '@/store'
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'CategoryAddBatchView',
  setup() {
    const intro = ref('')
    const allCategoryTagList = ref([])
    const tagId = ref(1)
    const tagLabel = ref('')
    const allCategoryList = ref([])
    const treeSelectData = ref([])
    const idParent = ref(1)
    const rows = ref('')

    const initAllCategoryTagList = () => {
      allCategoryTagList.value = JSON.parse(getLStorage('AllCategoryTag'))
      tagId.value = allCategoryTagList.value[0].id
      tagLabel.value = allCategoryTagList.value[0].label
    }
    const onTagChange = (e) => {
      listAllCategory(e)
      for (let i = 0; i < allCategoryTagList.value.length; i++) {
        if (e === allCategoryTagList.value[i].id) {
          idParent.value = allCategoryTagList.value[i].id
          tagLabel.value = allCategoryTagList.value[i].label
        }
      }
    }
    const listAllCategory = (e) => {
      allCategoryList.value = getLStorageObj('AllCategory')
      treeSelectData.value = AryToTree(allCategoryList.value, parseInt(e))
    }

    const onAddBatch = () => {
      if (!rows.value || rows.value === '') {
        toastError('分类不能为空！')
        return
      }
      const paramsJson = {
        Tag: tagLabel.value,
        IdParent: idParent.value,
        Rows: rows.value,
      }
      store
        .dispatch('sys_category/addBatch', paramsJson)
        .then(() => {
          toastSuccess('批量添加分类成功！')
          onBack2List()
        })
        .catch((error) => {
          console.log('服务器批量添加分类返回错误：', error)
        })
    }
    const onBack2List = () => {
      router.push({ path: 'list-all' })
    }

    onMounted(() => {
      intro.value = '批量添加分类，每行为一个子分类，每级子分类前加两个空格。空行自动删除。'
      intro.value += '注意：批量添加不会先删除所有子分类！'
      initAllCategoryTagList()
      listAllCategory(1)
    })

    return {
      intro,
      allCategoryTagList,
      tagId,
      tagLabel,
      allCategoryList,
      treeSelectData,
      idParent,
      rows,

      initAllCategoryTagList,
      onTagChange,
      onAddBatch,
      onBack2List,
    }
  },
})
</script>

<style lang="scss" scoped></style>
